<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Overflow - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">overflow</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Positioning Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="top.htm">top</a><br>
    <a href="right.htm">right</a><br>
    <a href="bottom.htm">bottom</a><br>
    <a href="left.htm">left</a><br>
    <a href="vertalign.htm">vertical-align</a><br></td>
    <td valign=top><a href="overflowx.htm">overflow-x</a><br>
    <a href="overflowy.htm">overflow-y</a><br>
    <a href="textoverflow.htm">text-overflow</a><br>
    <a href="clip.htm">clip</a><br>
    <a href="zindex.htm">z-index</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">visible</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Block and Replaced elements</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA<br></td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">CSS2: Sect. 11.1.1</a>,
        <a href="http://www.w3.org/TR/CSS21/visufx.html#overflow">CSS2.1: 11.1.1</a></td></tr>
</table>
</td></tr></table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>Some content in an element may fall outside the element's rendering
        box for a number of reasons (negative margins, absolute positioning,
        content exceeding the width/height set for an element, etc.) In
        cases where this occurs, the 'overflow' property describes what to
        do with the content outside the elements rendering area.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b class="s">N6</b>|<b><i class="fs">O4</i></b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">visible</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Content is not clipped and may be rendered outside of the element's box.</dd>

<dt><b class="subheading">hidden</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Content is clipped and content outside of the element's box is not visible.
        The size of the clipping region is defined by the 'clip' property.</dd>

<dt><b class="subheading">scroll</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Content is clipped as necessary, but scrollbars are made available
        where necessary to view the additional, non-visible content. If the
        Visual media in use is static (such as Print) the content should be
        treated as if the value was 'visible'.</dd>

<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value is browser and media dependent, but should allow for a
        scrollbar if possible in case of overflow.</dd>

<dt><b class="subheading">-moz-scrollbars-none</b></dt>
<dt>[<b><i class="fs">N6</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Mozilla proprietary value - authors should not use this value.
        Content is clipped as necessary, but no scrollbars are rendered.</dd>

<dt><b class="subheading">-moz-scrollbars-horizontal</b></dt>
<dt>[<b><i class="fs">N6</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Mozilla proprietary value - authors should not use this value.
        Content is clipped as necessary, and a horizontal scrollbar is forced to
        render, even if not necessary.</dd>

<dt><b class="subheading">-moz-scrollbars-vertical</b></dt>
<dt>[<b><i class="fs">N6</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Mozilla proprietary value - authors should not use this value.
        Content is clipped as necessary, and a vertical scrollbar is forced to
        render, even if not necessary.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">blockquote</b>
        { <span class="property">width:</span> 50px;
        <span class="property">height:</span> 50px;
        <span class="property">overflow:</span> scroll }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">blockquote</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">width:</span> 50px;
        <span class="property">height:</span> 50px;
        <span class="property">overflow:</span>
        scroll&quot;&gt;text<br>that scrolls if forced in the name of
        decent CSS&lt;/<b class="tagname">blockquote</b>&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>Before its inclusion in CSS2, this property was first proposed in the W3C
        Working Draft "Positioning HTML Elements with Cascading Style Sheets" (8/19/97,
        <a href="http://www.w3.org/TR/WD-positioning">http://www.w3.org/TR/WD-positioning</a>)
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">4.0+:</b>
            <dd>- The default value for this property as applied to the BODY
                element is "auto" not "visible".
            <dd>- For TEXTAREA elements, a value of "hidden" eliminates scrollbars.
            <dd>- The TABLE element supports this property with a default value of "hidden".
            <dd><b class="alert2">5.0+:</b>
            <dd>- Table cell elements (TD/TH) support this property with a default 
                value of "hidden", if the 'table-layout' property is set to "fixed".
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">4.0+:</b>
            <dd>- It seems like Opera is cutting off any borders applied to
                an element if 'overflow' is set to "hidden." This is fixed
                in 5.x+ unless the element is positioned, in which case it still
                cuts off applied borders.
            <dd>- Opera's features page says that "overflow: scroll" is not supported
                in Opera, but it <em>does</em> have an effect, since the default
                value should be "visible", and it is NOT behaving that way.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>